<template>
<div class="sms-template-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">基础信息</div>
        <div class="wlm-form-content">
            <el-form ref="active" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="144px" class="retail-form" label-position="right">
                <el-form-item label="模板ID" prop="template_id">
                    <el-input v-model.trim="formFormatData.formData.template_id">
                    </el-input>
                </el-form-item>
                <el-form-item label="模板名称" prop="name">
                    <el-input :maxlength="15" v-model.trim="formFormatData.formData.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="模板内容" prop="template_content">
                  <div class="flex-row flex-align-e">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入内容" v-model="formFormatData.formData.template_content" @input.native="matchCode">
                    </el-input>
                    <p class="form-help" style="margin-left: 10px;">例：恭喜您购买商品${goods_name}成功，您的核销码为${code}。</p>
                  </div>
                    <p class="form-help">请将短信服务商的短信模板的内容复制到这里</p>
                </el-form-item>
                <el-form-item label="数据值"  v-if="categoryData&&formFormatData.formData.template_data&&formFormatData.formData.template_data.length>0">
                    <div v-for="(item, index) in formFormatData.formData.template_data" :key="index" class="flex-row flex-align-c" style="margin-bottom:18px;">
                        <el-input readonly v-model="item.name">
                            <template slot="prepend">短信模板变量</template>
                        </el-input>
                        <div class="cascader-appendbox flex-row flex-align-c flex-justify-s" style="margin-left:10px;">
                            <div class="wlm-input-append append-left">商城变量</div>
                            <el-cascader  v-model="item.type" :options="categoryData"></el-cascader>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form">
        <div class="wlm-form-header">短信测试</div>
        <div class="wlm-form-content">
            <el-form ref="active" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="144px" class="retail-form" label-position="right">
                <el-form-item label="手机号">
                    <el-input v-model.trim="formFormatData.formData.mobile">
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="testSms">发送测试短信</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary">保存</el-button>
        <router-link tag="span" to="/application/smsTemplate">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  smsAddOrEdit,
  getSmsData,
  getSmsList,
  sendTestData
} from '@/api/application'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'SmsTemplateAdd',
  components: {

  },
  created() {
    getSmsList().then((response) => {
      const {
        data: { data: msgData = [] }
      } = response
      this.categoryData = msgData
      console.log(this.categoryData)
    })
  },
  computed: {

  },
  data() {
    return {
      categoryData: [],
      defaultMsg: '${dsfa}cc${ddd}',
      formFormatData: {
        key: ['active'],
        api: {
          editForm: {
            api: getSmsData,
            params: {
              id: ''
            }
          },
          submitForm: smsAddOrEdit
        },
        formData: {
          template_id: '',
          template_content: '',
          name: '',
          template_data: [],
          mobile: '',
          type: 1
        },
        rules: {
          template_id: [{
            message: '请填写模板ID',
            required: true,
            trigger: 'change'
          }],
          name: [{
            message: '请填写模板名称',
            required: true,
            trigger: 'change'
          }],
          template_content: [{
            message: '请填写模板内容',
            required: true,
            trigger: 'change'
          }]
        }
      }
    }
  },
  methods: {
    testSms() {
      sendTestData(this.formFormatData.formData).then((response) => {
        const { data: { code, data, msg } } = response
        console.log(data)
        if (code === 1) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    matchCode(val) {
      var patt = /\$\{[\s\S]*?\}/g
      const result = []
      if (this.formFormatData.formData.template_content && this.formFormatData.formData.template_content.match(patt)) {
        this.formFormatData.formData.template_content.match(patt).map((item, index) => {
          item = item.replace(/\$\{/g, '').replace(/\}/g, '')
          if (this.formFormatData.formData.template_data[index] && this.formFormatData.formData.template_data[index]['type']['length'] > 0) {
            result.push({ 'name': item, type: this.formFormatData.formData.template_data[index]['type'] })
          } else {
            result.push({ 'name': item, type: [] })
          }
        })
      }
      this.formFormatData.formData.template_data = result
    },
    saveForm() {
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/smsTemplate', code: 1 } })
    }
  }
}
</script>

<style lang="scss" scoped>
.sms-template-add {
    /deep/ .cascader-appendbox {
        .el-input .el-input__inner {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            height: 32px;
            width: 200px;
        }

        .el-input.el-input--suffix {
            height: 32px;
            width: 200px;
        }
        .el-cascader{
            height: 32px;
        }
        .wlm-input-append {
            height: 32px;
            padding: 0 13px;
            text-align: center;
            line-height: 32px;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            border-right-color: transparent;
            border-left-color: transparent;
            color: #909399;

            &.append-right {
                border-right-color: #dcdfe6;
                border-bottom-right-radius: 4px;
                border-top-right-radius: 4px;
            }

            &.append-left {
                border-left-color: #dcdfe6;
                border-bottom-left-radius: 4px;
                border-top-left-radius: 4px;
            }
        }
    }

}
</style>
